<template>
  <div class="videoItem">
    <div class="videoItem-header">
      <img :src="'https://www.ttzxh.icu/api/static/bg/bg.webp'" alt="" />
    </div>
    <div class="videoItem-footer">
      <span>{{ videoItem.title }}</span>
      <p>{{ formatTime(videoItem.time) }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, toRefs } from "vue";
import { TVideo } from "@/type/video";
import { formatTime } from "@/formatTime";
const props = defineProps<{ videoItem: TVideo }>();
const { videoItem } = toRefs(props);
// {
//   videoItem: {
//     type: Object,
//     default: {
//       id: 0,
//       introduce: "",
//       poster: "",
//       prod: "",
//       time: "",
//       title: "",
//     },
//   },
// }
</script>

<style lang="scss" scoped>
.videoItem {
  width: 100%;
  background-color: #fff;
  border-radius: 5px;
  overflow: hidden;
  &-header {
    width: 100%;
    img {
      width: 100%;
      height: 100px;
    }
  }
  &-footer {
    width: 100%;
    padding: 0 10px;
    font-size: 13px;
    color: $font-color-qian;
    p {
      font-size: 12px;
    }
  }
}
</style>
